<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
    html,body {
      font-size: 1.2rem;
      background: #ffffff;
      color: #333333 !important
    }
    [v-cloak] {
        display: none;
    }
    .classify_fliter{
      position: relative;
    }
    .classify_fliter_bg{
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:#333;
      opacity: 0.5;
      z-index: 5;
    }
    .classify_fliter_con{
      padding-left:4rem;
      position: relative;
      z-index: 10;
    }
    .classify_fliter_con1{
      padding: 1rem;
      background: #fff;
      padding-bottom: 6rem;
    }
    .classify_fliter_sec1 .classify_fliter_sec1_title{
      font-size:1.6rem;
      line-height: 1;
      color:#333;
      font-weight: 600;
      margin-top:1rem;
    }
    .classify_fliter_sec1 .classify_fliter_sec1_title i.classify_fliter_sec1_right{
      float: right;
      font-size: 1.1rem;
      line-height: 1.4rem;
      color: #848484;
    }
    .classify_fliter_sec1_lab{
      margin-top:1.85rem;
      position: relative;
    }
    .classify_fliter_sec1_lab span{
      font-size: 1.2rem;
      color: #333;
      line-height: 1;
      padding: 1rem 2rem;
      border-radius: 1.6rem;
      min-width: 9rem;
      background: #f6f6f6;
      text-align: center;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
    .classify_fliter_sec1_lab span.on{
      background: #ed6a20;
      color: #fff;
    }
    .classify_fliter_sec1_lab span.dingwei{
      background: transparent;
      min-width: inherit;
      padding-left: 0;
      position: relative;
      color:#737373
    }
    .classify_fliter_btn{
      position: fixed;
      width:calc(100% - 4rem);
      bottom:0;
      left:4rem;
      height:5rem;
    }
    .classify_fliter_btn1{
      width:50%;
      float:left;
      height:100%;
      line-height: 5rem;
      color:#848484;
      font-size:1.8rem;
      background:#fff;
      text-align: center;
    }
    .classify_fliter_btn2{
      width:50%;
      float:left;
      height:100%;
      line-height: 5rem;
      background: #ed6a20;
      font-size:1.8rem;
      color:#fff;
      text-align: center;
    }
    .classify_fliter_sec1_lab input{
      width:45%;
      background: #f6f6f6;
      border-radius: 1.6rem;
      font-size:1.2rem;
      color:#333;
      height:3.2rem;
      line-height: 3.2rem;
      text-align: center;
      margin-bottom: 1rem;
    }
    .fl{
      float:left;
    }
    .fr{
      float:right;
    }
    .classify_fliter_sec1_lab .lines{
      position: absolute;
      top:50%;
      left:48%;
      width: 1rem;
    	height: 0.1rem;
    	background-color: #848484;
    }
    .classify_fliter_sec1_lab .lines1{
      position: absolute;
      top: 22%;
      left: 31%;
      width: 0.1rem;
      height: 1.5rem;
      background-color: #ccc;
    }
    i.classify_fliter_sec1_location{
      font-size: 1.2rem;
      color: #333;
      vertical-align: middle;
      margin-right: 0.3rem;
    }
    i.classify_fliter_sec1_recovery{
      font-size: 1.2rem;
      color: #333;
      vertical-align: middle;
      margin-right: 0.3rem;
    }
    .classify_fliter_sec1_title_all{
      float:right;
      font-size:1.5rem;
      color:#848484;
      font-weight: normal;
    }
    .classify_fliter_sec1_title_all i{
      font-size:1.2rem;
      vertical-align: middle;
      margin-left:0.4rem;
    }


</style>
<body>
<div id="app">
  <div class="classify_fliter">
    <div class="classify_fliter_bg"></div>
    <div class="classify_fliter_con">
      <div class="classify_fliter_con1">
        <div class="classify_fliter_sec1">
          <div class="classify_fliter_sec1_title">邮费</div>
          <div class="classify_fliter_sec1_lab postage">
            <span @click="selPostage(0)" data-pid="1">包邮</span>
            <span @click="selPostage(1)" data-pid="0">邮费自理</span>
          </div>
        </div>
        <div class="classify_fliter_sec1">
          <div class="classify_fliter_sec1_title">价格区间</div>
          <div class="classify_fliter_sec1_lab clearfix">
            <input type="text" placeholder="最低价" class="fl" v-model="theLow">
            <input type="text" placeholder="最高价" class="fr" v-model="theheight">
            <i class="lines"></i>
          </div>
        </div>
        <div class="classify_fliter_sec1">
          <div class="classify_fliter_sec1_title">商品标识</div>
          <div class="classify_fliter_sec1_lab tradeMarks">
            <span @click="selTradeMarks(0)" data-pid="1">褚氏</span>
            <span @click="selTradeMarks(1)" data-pid="2">代理</span>
            <span @click="selTradeMarks(2)" data-pid="3">个企</span>
          </div>
        </div>
        <!-- <div class="classify_fliter_sec1">
          <div class="classify_fliter_sec1_title" onclick="selCity()">发货地<i class="aui-iconfont aui-icon-right classify_fliter_sec1_right"></i></div>
          <div class="classify_fliter_sec1_lab">
            <span>南京</span>
            <i class="lines1"></i>
            <span><i class="aui-iconfont aui-icon-location classify_fliter_sec1_location"></i>杭州</span>
            <span class="dingwei"><i class="aui-iconfont aui-icon-recovery classify_fliter_sec1_recovery"></i>刷新定位</span>
          </div>
        </div> -->
        <!-- <div class="classify_fliter_sec1">
          <div class="classify_fliter_sec1_title">分类 <div class="classify_fliter_sec1_title_all">全部<i class="aui-iconfont aui-icon-down classify_fliter_sec1_down"></i></div></div>
          <div class="classify_fliter_sec1_lab">
            <span>面霜</span>
            <span>礼盒装</span>
            <span>组合装</span>
            <span>面霜</span>
            <span>礼盒装</span>
            <span>组合装</span>
            <span>面霜</span>
            <span>礼盒装</span>
            <span>其他</span>
          </div>
        </div> -->
        <div class="classify_fliter_sec1">
          <div class="classify_fliter_sec1_title">品牌</div>
          <div class="classify_fliter_sec1_lab brands">
            <span v-for="(items1,index) in brandList" :data-pid="items1.brand_id" @click="selBrands(index)">{{items1.brand_name}}</span>
            <!-- <span>自然堂</span>
            <span>玉兰油</span>
            <span>欧诗漫</span>
            <span>韩束</span>
            <span>玉兰油</span>
            <span>雅诗兰黛</span>
            <span>The Whoo</span>
            <span>其他</span> -->
          </div>
        </div>
        <div class="classify_fliter_btn">
          <div class="classify_fliter_btn1" @click="reSet()">重置</div>
          <div class="classify_fliter_btn2" @click="closeFR()">确定</div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>


<script type="text/javascript">
function doSearch(){
    var searchValue = document.getElementById("search-input").value;
    if(searchValue){
        api.toast({
            msg: searchValue,
            duration: 2000,
            location: 'bottom'
        });

    }
}
  apiready = function(){
    //setRefresh()
    app = new Vue({
        el: '#app',
        data: {
          brandList:[],
          theLow:'',
          theheight:'',
          is_exp:'',
          store_type:'',
          brand_id:''
        },
        created: function() {
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });
          // console.log(this.cateId);
          var $_this=this;
          $_this.getBrands();
        },
        methods: {
          getBrands:function(){
            var $_this=this;
            const data = {

            }
            Axios.post(window.Url.goods_brand,data).then(function(res){
                console.log(JSON.stringify(res))
                $_this.brandList=res;
                // $_this.page=res.page;
                $_this.$nextTick(function () {

                })
            }).catch((err) => {
              api.alert({ msg: JSON.stringify(err) });
            })
          },
          selPostage:function(type){
            var $_this=this;
            $('.postage span').removeClass("on");
            $('.postage span').eq(type).addClass("on");
            $_this.is_exp=$('.postage span').eq(type).data("pid");
            console.log($_this.is_exp);
          },
          selTradeMarks:function(type){
            var $_this=this;
            $('.tradeMarks span').removeClass("on");
            $('.tradeMarks span').eq(type).addClass("on");
            $_this.store_type=$('.tradeMarks span').eq(type).data("pid");
            console.log($_this.store_type);
          },
          selBrands:function(type){
            var $_this=this;
            $('.brands span').removeClass("on");
            $('.brands span').eq(type).addClass("on");
            $_this.brand_id=$('.brands span').eq(type).data("pid");
            console.log($_this.brand_id);
          },
          reSet:function(){
            var $_this=this;
             $('.classify_fliter_sec1_lab span').removeClass('on');
             $_this.theLow='';
             $_this.theheight='';
             $_this.is_exp='';
             $_this.store_type='';
             $_this.brand_id='';
          },
          closeFR:function(){
            var $_this=this;
            if($_this.theLow == '' && $_this.theheight != ''){
              api.toast({
                  msg:"请输入最低价",
                  duration: 2000,
                  location: 'bottom'
              });
              return false;
            }else if($_this.theLow != '' && $_this.theheight == ''){
              api.toast({
                  msg:"请输入最高价",
                  duration: 2000,
                  location: 'bottom'
              });
              return false;
            }
            api.sendEvent({
                name: 'selSuccess',
                extra: {
                    theLow: $_this.theLow,
                    theheight: $_this.theheight,
                    is_exp: $_this.is_exp,
                    store_type: $_this.store_type,
                    brand_id: $_this.brand_id
                }
            });
            api.closeFrame({});
          }
        },
        mounted: function () {
          api.hideProgress();
          $('.classify_fliter').height($(window).height());
          $('.classify_fliter_con1').height($('.classify_fliter').height());
          // tabNav();
          // setRefresh();
        }
      })

  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }

  function selCity(){
      api.openWin({
          name: 'classClassifyCity',
          url: './class_classify_city.html',
          pageParam: {
              test:''
          }
      });
  }

  function closeFR(){
    api.closeFrame({

    });

  }

</script>
